<!-- 护理项目列表页 -->
<script setup lang="jsx">
import { onMounted, ref } from 'vue';
import { getProjectDetails, getProjectList, projectAdd, projectUpdate } from '@/api/serve';
import TableList from './components/TableList.vue';
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next';

const data = ref([]);
const total = ref(0);

const pagination = ref({
  pageNum: 1,
  pageSize: 5,
});

const onPageChange=(pageInfo)=>{
  console.log(pageInfo)
  // 当页码或每页大小改变更新pagination中的数据
  pagination.value.pageNum=pageInfo.current
  pagination.value.pageSize=pageInfo.pageSize

  // 重写查询数据
  getList()
}

const getList=async ()=>{
  // 远程接口调用
  const result=await getProjectList(pagination.value)
  // 判断调用成功
  if(result.code==200){
    // 成功，更新数据列表data，总条数total
    data.value=result.data.records
    total.value=result.data.total
  }
}

// 钩子函数
onMounted(()=>{
  getList()
})

// handleClear点击事件，清除当前表单元素数据
const handleClear=(val)=>{
  if(val=='name'){
    // 清除name数据
    pagination.value.name=''
  }else if(val=='status'){
    delete pagination.value.status
  }
  // 重新查询数据
  getList()
}

// handleReset点击事件，重置表单所有数据
const handleReset=()=>{
  // 重置pagination
  pagination.value={
    pageNum: 1,
    pageSize: 5,
  }
  // 重置查询数据
  getList()
}

//是否显示弹窗
var visible = ref(false)
const formRef = ref([])
var title=ref('') //弹窗标题
const formBaseData=ref({}) //弹窗表单内容
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  title.value='新增'
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}

// 新增护理项目点击事件
const handleAdd=async(formData)=>{
  // 远程调用新增护理项目接口
  const result=await projectAdd(formData)
  if(result.code==200){
    MessagePlugin.success('操作成功')
    visible.value=false
    formRef.value.handleClear()
    getList()
  }else{
    MessagePlugin.error(result.msg)
  }
}

// 编辑
const handleEdit=(val)=>{
  title.value='编辑'
  getDetails(val.id)
  visible.value=true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }else{
    MessagePlugin.error(res.msg)
  }
}

// 修改数据
const handleEditForm=async (val)=>{
  // 远程调用修改护理项目接口
  const result=await projectUpdate(val)
  // 判断返回code是否为200
  if(result.code==200){
    // 提示成功
    MessagePlugin.success('编辑成功')
    // 关闭对话框
    visible.value=false
    // 重新查询
    getList()
    // 清空表单数据
    formRef.value.handleClear()
    // handleClose()
  }else{
    MessagePlugin.error(result.msg)
  }
}

</script>

<template>
  <div class="min-h serveProject bg-wt">
    <!-- 显示搜索表单子组件 -->
    <SearchForm 
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="getList"
    ></SearchForm>

    <!-- 显示分页列表查询子组件 -->
    <TableList :data="data" :bordered="bordered" :hover="hover" :size="size" :total="total" :pagination="pagination"
      @onPageChange="onPageChange" @handleBulid="handleBulid" @handleEdit="handleEdit"></TableList>
     
    <!-- 展示弹窗 -->
    <DialogForm 
        ref="formRef"
        :visible="visible" 
        :title="title"
        :data="formBaseData"
        @handleClose="handleClose"
        @handleAdd="handleAdd"
        @handleEdit="handleEditForm"
    ></DialogForm>
  </div>
</template>
